<template>
  <div id="certificatelist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

               
                <el-table-column label="账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span style="display: flex;align-items: center;justify-content: center;">
                            {{ scope.row.telphone }}
                            <img src="@/assets/images/a9.png" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.telphone)"/>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="贡献值"  align='center' >                   
                    <template slot-scope="">                   
                        <span >暂无</span>
                    </template>
                </el-table-column>

                
                 <el-table-column :label="variable_name2 + '余额'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.gdb }}</span>
                    </template>
                </el-table-column>
              
                <el-table-column :label="variable_name2 + '券'"  align='center' width="600px">                   
                    <template slot-scope="scope" >        
                      <div style="display:flex;justify-content: center;">
                        <div v-for="(item,index) in select_data" :key="index" > 
                            <div v-if="index == 0">
                              <span >{{ variable_kind1 }}:</span><span>{{ scope.row.one_num }}</span><span  class="see_span" @click="show_but(scope.row,select_data[0].maid)"><i class="el-icon-view el-icon--right"></i></span>  
                            </div>
                            <div v-if="index == 1">
                              <span >{{ variable_kind2 }}:</span><span>{{ scope.row.two_num }}</span><span  class="see_span" @click="show_but(scope.row,select_data[1].maid)"><i class="el-icon-view el-icon--right"></i></span> 
                            </div>
                            <div v-if="index == 2">
                              <span >{{ variable_kind3 }}:</span> <span>{{ scope.row.three_num }}</span><span  class="see_span" @click="show_but(scope.row,select_data[2].maid)"><i class="el-icon-view el-icon--right"></i></span>
                            </div>
                            <div v-if="index == 3">
                              <span >{{ variable_kind4 }}:</span> <span>{{ scope.row.four_num }}</span><span  class="see_span" @click="show_but(scope.row,select_data[3].maid)"><i class="el-icon-view el-icon--right"></i></span>
                            </div>
                        </div>            
                      </div>  
                        
                        
                        
                    </template>
                </el-table-column>


              
  
            </el-table>  


      
      <el-dialog title='来源明细' :visible.sync="mtk1"  width="600px">
          <div style="width:100%;"> 
               <div class="item_a" style="display:flex;padding:0px 0px 40px 0px;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">邀请抢拍</div>
                          <div class="item_b_2" style="text-align: center;">{{ infor_data.invite_num }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">活动获得</div>
                          <div class="item_b_2" style="text-align: center;">{{ infor_data.activity_num }}</div>
                      </div>
                       <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">后台调控</div>
                          <div class="item_b_2" style="text-align: center;">{{ infor_data.manage_num }}</div>
                      </div>
               </div>
          </div> 
      </el-dialog>
     


   </div>
</template>

<script>

export default {
   name: 'certificatelist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
     select_data:{
        default:()=>[]
     }
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        mtk1:false,
        infor_data:'',
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 605
      
  },
  mounted (){
    
  },
  methods: {

   goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
    },
    show_but(row,maid){
       this.post("/gdb_new_ticket/detailOfSource", {
          maid:maid,
          type:1,
          uid:row.uid
       }).then(res => { 
          // this.statisticslist_show = true
          //  this.select_data = res.result  
          this.infor_data = res.result    
          //console.log(res.result  )                  
       })
        
        this.mtk1 = true
    },
 


  }
}
</script>


<style scoped>
.item_a{
  display:flex;
  padding:0px 15px;
}
.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
  margin-top:30px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  /* margin-top: 10px; */
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}

</style>